<template>
  <div>
    <van-nav-bar @click-left="dynamic" title="提醒谁看">
      <template #left>
        <van-icon size="18px" name="arrow-left" />
      </template>
      <template #right>
        <van-button @click="ttt" class="tx-btn" type="primary" size="mini"
          >确定</van-button
        >
      </template>
    </van-nav-bar>
    <van-search class="tx-inp" v-model="value" placeholder="请输入搜索关键词" />

    <article-item
      @kks="parentClick"
      ref="ArticleItem"
      :items="item"
      v-for="item in 30"
      :key="item"
    ></article-item>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
import { Icon } from "vant";
import ArticleItem from "@/components/article_item.vue";

Vue.use(Icon);

export default {
  components: { "article-item": ArticleItem },
  data() {
    return {
      value: "",
      kks2: [],
    };
  },
  methods: {
    parentClick(temp) {
      //    this.$refs.ArticleItem.kks
      //    console.log(this.$refs);
      // console.log(temp);
      this.kks2.push(temp);

      // console.log(this.kks2);
      // this.$refs.ArticleItem.kkl()

      // console.log(this.kks2);
      // console.log(temp);
    },
    ttt(kks2) {
      //    this.$refs.ArticleItem.kkl
      let lid = this.kks2;

      if (this.kks2.length > 0) {
        Toast({
          message: "指定成功",
          position: "bottom",
        });
      } else {
        Toast({
          message: "谁都没有选",
          position: "bottom",
        });
      }
      // this.$refs.ArticleItem.kkl()
    },
    dynamic() {
      this.$router.replace({ path: '/dynamic' })
    },
  },
};
</script>

<style  scoped>
.tx-btn {
  padding: 12px 14px;
  font-size: 15px;
  border-radius: 7px;
}
.van-search {
  padding: 10px 0px;
}
</style>